<template>
	<view class="tabs">
		<view v-for="(item,index) in list" :key="item.id" class="tab-item"
			:class="userStore.nowPageId == index && 'active'" @click="changeTab(index)">
			<image class="tab_img" :src="userStore.nowPageId == index ? item.selectedIconPath : item.iconPath">
			</image>
			<view class="tab_text">{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watchEffect } from 'vue';
	import { useUserStore } from '@/stroes';
	const userStore = useUserStore()
	const emits = defineEmits(['changeTabBar'])

	const list = ref([])
	// const currentIndex = ref(1)
	function changeTab(index : number) {
		userStore.nowPageId = index
		/* if (item.id != 0) {
			userStore.nowPageId = item.id
		} else {
			uni.showToast({
				title: '功能正在开发中...',
				icon: 'none'
			})
		} */

	}
	watchEffect(() => {
		// 1--company 运企管理  2--dirver 司机端  3--terminal_sign 消纳端  4--terminal_manage 消纳管理端
		switch (userStore.nowEndType?.roleCode) {
			case 'company':
				list.value = [
					{
						"pagePath": "/pages/firm/cart/cart",
						"iconPath": "/static/img/tabbar/cart.svg",
						"selectedIconPath": "/static/img/tabbar/cart_active.svg",
						"id": 1,
						"text": "车辆"
					},
					{
						"pagePath": "/pages/firm/driver/driver",
						"iconPath": "/static/img/tabbar/driver.svg",
						"selectedIconPath": "/static/img/tabbar/driver_active.svg",
						"id": 2,
						"text": "驾驶员"
					}, {
						"pagePath": "/pages/firm/settlementCenter/settlementCenter",
						"iconPath": "/static/img/tabbar/settlement_center.svg",
						"selectedIconPath": "/static/img/tabbar/settlement_center_active.svg",
						"id": 3,
						"text": "结算中心"
					},
					{
						"pagePath": "/pages/firm/my/my",
						"iconPath": "/static/img/tabbar/my.svg",
						"selectedIconPath": "/static/img/tabbar/my_active.svg",
						"id": 4,
						"text": "我的"
					}
				]
				break;
			case 'driver':
				list.value = [{
					"pagePath": "/pages/drivers/orderTakingCenter/orderTakingCenter",
					"iconPath": "/static/img/tabbar/order_center.png",
					"selectedIconPath": "/static/img/tabbar/order_center_active.png",
					"id": 1,
					"text": "接单中心"
				}, {
					"pagePath": "/pages/drivers/missionCenter/missionCenter",
					"iconPath": "/static/img/tabbar/mission_center.png",
					"selectedIconPath": "/static/img/tabbar/mission_center_active.png",
					"id": 2,
					"text": "任务中心"
				}, {
					"pagePath": "/pages/drivers/settlementCenter/settlementCenter",
					"iconPath": "/static/img/tabbar/settlement_center.png",
					"selectedIconPath": "/static/img/tabbar/settlement_center_active.png",
					"id": 3,
					"text": "结算中心"
				}, {
					"pagePath": "/pages/drivers/my/my",
					"iconPath": "/static/img/tabbar/my.png",
					"selectedIconPath": "/static/img/tabbar/my_active.png",
					"id": 4,
					"text": "我的"
				}
				]
				break;
			case 'terminal_sign':
				list.value = [{
					"pagePath": "/pages/consumption/home/home",
					"iconPath": "/static/img/tabbar/home.png",
					"selectedIconPath": "/static/img/tabbar/home_active.png",
					"id": 1,
					"text": "首页"
				}, {
					"pagePath": "/pages/consumption/dataCenter/dataCenter",
					"iconPath": "/static/img/tabbar/data.png",
					"selectedIconPath": "/static/img/tabbar/data_active.png",
					"id": 2,
					"text": "数据中心"
				}, {
					"pagePath": "/pages/consumption/my/my",
					"iconPath": "/static/img/tabbar/my.png",
					"selectedIconPath": "/static/img/tabbar/my_active.png",
					"id": 3,
					"text": "我的"
				}
				]
				break;
			case 'terminal_manage':
				list.value = [{
					"pagePath": "/pages/consumptionAdmin/home/home",
					"iconPath": "/static/img/tabbar/home.png",
					"selectedIconPath": "/static/img/tabbar/home_active.png",
					"id": 1,
					"text": "首页"
				}, {
					"pagePath": "/pages/consumptionAdmin/dataCenter/dataCenter",
					"iconPath": "/static/img/tabbar/data.png",
					"selectedIconPath": "/static/img/tabbar/data_active.png",
					"id": 2,
					"text": "数据中心"
				}, {
					"pagePath": "/pages/consumptionAdmin/my/my",
					"iconPath": "/static/img/tabbar/my.png",
					"selectedIconPath": "/static/img/tabbar/my_active.png",
					"id": 3,
					"text": "我的"
				}
				]
				break;
		}
	})
</script>

<style scoped lang="scss">
	.tabs {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0rpx 60rpx;
		// padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		// z-index: 99999;
		// width: 100%;
		box-sizing: border-box;

		.tab-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			text-align: center;

			&.active {
				.tab_text {
					color: $primary-color;
				}
			}

			.tab_img {
				width: 48rpx;
				height: 48rpx;
			}

			.tab_text {
				margin-top: 6rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				color: $info-color;
			}
		}
	}
</style>